<template>
	<view class="bottom-input" :style="{bottom:`${up}upx`}">
		<view class="voice" v-show="startVoice">
			<text class="iconfont icon-yuyin"></text>
			<text class="info">手指上滑 取消发送</text>
		</view>
		<text class="switch__mode iconfont icon-yuyin" @tap="switchMode"></text>
		<input type="text" class="search" v-show="!isVoiceMode" v-model="sendUser" @confirm="submit"/>
		<text :class="[{active:startVoice}]" class="search" style="text-align: center;" @touchstart="move.slideStart"
			@touchmove="move.slideMove" @touchend="move.slideEnd" v-show="isVoiceMode">按住 说话</text>
		<text class="iconfont icon-icon_xiaolian-xian"></text>
		<text class="iconfont icon-tianjia" @tap="emits('moveUp')"></text>
		<!-- 底部 -->
		<scroll-view class="footer">123</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue';
	import {
		slide
	} from '@/hooks/move.js';

	const props = defineProps({
		up: {
			type: Number,
			required: true
		}
	})
	const sendUser = inject("sendUser")
	const emits = defineEmits(["moveUp","confirm"])
	const isVoiceMode = ref(false)
	const startVoice = ref(false)
	/**
	 * 语音手指事件
	 */
	const move = slide((start, end) => {
		// 判断是否上滑
		}, (start, end) => {
			startVoice.value = true
		}, (start, end) => {
			//&&end[1]-start[1]>-220
			if (end[1] - start[1] < -120) {
				startVoice.value = false
			} else {
				console.log("发送")
				startVoice.value = false
			}

		})


	
	function submit(e){
		const info = {
			type: "text", //消息类型 文字 图片 
			message: sendUser.value,
			createTime: new Date(), //创建时间
			formId: "",
			toId: "",
			isRead: false, //是否已读
		}
		emits('confirm',info)
	}
	
	/**
	 * 切换模式
	 */
	function switchMode() {
		isVoiceMode.value = !isVoiceMode.value
	}
</script>

<style scoped lang="scss">
	.bottom-input {
		transition: .4s linear;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		height: 100upx;
		display: flex;
		padding: 20upx 0;
		border-top: 1upx solid #ccc;
		align-items: center;
		gap: 20upx;

		.iconfont {
			font-size: 50upx;
		}

		.switch__mode {
			padding-left: 20upx;
		}

		.icon-tianjia {
			padding-right: 20upx;
		}

		.search {
			flex: 1;
			padding: 15upx 2upx;
			font-size: 30upx;
			border-radius: 4upx;
			box-shadow: inset 0 0 0 1upx #ccc;
			background-color: #fff;

			&.active {
				background-color: #949494;
				color: white;
			}
		}

		.icon-icon_xiaolian-xian {
			font-size: 47upx;
		}

		.voice {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			color: white;
			background-color: #949494;
			justify-content: center;
			align-items: center;
			border-radius: 10upx;
			gap: 10upx;
			padding: 50upx;

			.iconfont {
				font-size: 160upx;
			}

			.info {
				font-size: 20upx;
			}
		}
	}

	.footer {
		position: absolute;
		width: 100%;
		bottom: 0;
		transform: translateY(100%);
		height: 380upx;
		background-color: red;
	}
</style>